<script setup lang="ts">
import { ref, reactive, defineEmits, onMounted, onUpdated } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import type { SwipeInstance } from 'vant';
import { Dialog } from 'vant';
import useClipboard from 'vue-clipboard3'
const router = useRouter()
const route = useRoute()
const cdkey = ref('');
const focustype = ref('none');
const formSwipe = ref<SwipeInstance>();
const showCard = ref(0); //控制展示那个卡片
const currentIndex = ref(0); // 当前切换到哪个位置
const goodsInfo = reactive({
    text: 'QQ普通会员(1个月)',
    cardId: 'D65456Q4E511RQEQ',
    address: 'https://cdk.qq.com/d'
})
const { toClipboard } = useClipboard()

onMounted(() => {
    console.log(router);
})

const btnsumit = () => {
    // 弹窗示例
    Dialog.alert({
        title: '温馨提示',
        width: 290,
        message: '<p class="dialog-msg">该兑换码已被使用</p>',
        theme: 'round-button',
        confirmButtonColor: '#DF3030',
        confirmButtonText: '好的',
        allowHtml: true,
        className: 'new-dialog'
    }).then(() => {
        // 此处是示例代码
        showCard.value = 2;
        formSwipe.value?.next();
    })
}

const btnsearch = () => {
    showCard.value = 1;
    formSwipe.value?.next();
}

const btnUpdate = () => {
    console.log('更新');
}

const btnreturn = () => {
    if (currentIndex.value === 0) {
        router.back()
    } else {
        formSwipe.value?.prev();
    }

}


// 复制剪贴板
const copyPass = async (data: string) => {
    console.log('复制卡密', data);
    try {
        await toClipboard(data)
        console.log('Copied to clipboard')
    } catch (e) {
        console.error(e)
    }
}

const changeSwiper = (index: number) => {
    console.log(index, 43434343)
    currentIndex.value = index;
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
}

const focusInput = (type: string) => {
    console.log(type);
    focustype.value = type;
}

const blurInput = () => {
    focustype.value = 'none';
}


</script>

<template>
    <div class="mentions">
        <div class="show-content">
            <div class="back" @click="btnreturn">
                <img src="../assets/img/left.png" alt="left" />
            </div>
            <van-swipe
                class="card-swipe"
                :loop="false"
                :touchable="false"
                :show-indicators="false"
                :initial-swipe="0"
                @change="changeSwiper"
                ref="formSwipe"
            >
                <van-swipe-item>
                    <div class="content">
                        <div class="title">验证卡密</div>
                        <div class="dec">请输入您的兑换码提取对应商品,若系统自动识别,直接下一步即可!</div>
                        <div class="item">
                            <div class="label">兑换码</div>
                            <div class="item-info" :class="{ itemfocus: focustype === 'cdkey' }">
                                <input
                                    type="text"
                                    v-model="cdkey"
                                    class="input"
                                    placeholder="输入兑换码"
                                    @focus="focusInput('cdkey')"
                                    @blur="blurInput"
                                />
                                <img class="icon" src="@/assets/img/yaoshi.png" />
                            </div>
                        </div>
                        <div class="item">
                            <div class="label">对应商品</div>
                            <div class="item-goods">
                                <span class="showtext">{{ goodsInfo.text }}</span>
                            </div>
                        </div>

                        <div class="btn-light" @click="btnsumit">
                            <span>马上提交</span>
                        </div>
                        <div class="btn-gray" @click="btnsearch">
                            <span>查询卡密</span>
                        </div>
                    </div>
                </van-swipe-item>
                <van-swipe-item v-if="showCard == 1">
                    <div class="content">
                        <div class="item">
                            <div class="label">卡密信息</div>
                            <div class="item-goods" @click="copyPass(goodsInfo.cardId)">
                                <span class="showtext">{{ goodsInfo.cardId }}</span>
                                <img class="icon" src="@/assets/img/copy.png" />
                            </div>
                        </div>
                        <div class="item">
                            <div class="label">对应商品</div>
                            <div class="item-goods">
                                <span class="showtext">{{ goodsInfo.text }}</span>
                            </div>
                        </div>

                        <div class="item">
                            <div class="label">兑换地址</div>
                            <div class="item-goods" @click="copyPass(goodsInfo.address)">
                                <span class="showtext">{{ goodsInfo.address }}</span>
                                <img class="icon" src="@/assets/img/copy.png" />
                            </div>
                        </div>
                        <div class="title">使用教程</div>
                        <div class="teach">打开美团外卖APP,点击我的,然后点击头像下方有个红包,然后点击右上角兑换,即可成功兑换!</div>
                        <div class="btn-light" @click="btnUpdate">
                            <span>刷新</span>
                        </div>
                    </div>
                </van-swipe-item>

                <van-swipe-item v-if="showCard == 2">
                    <div class="content">
                        <div class="tip">
                            <img src="@/assets/img/success.png" />
                            <span>提取成功</span>
                        </div>
                        <div class="tip-msg">恭喜你提卡成功!点击下方提取卡密即可前往复制卡密哦!</div>

                        <div class="btn-light" @click="copyPass(goodsInfo.cardId)">
                            <span>提取卡密</span>
                        </div>
                    </div>
                </van-swipe-item>
            </van-swipe>
        </div>
    </div>
</template>

<style  lang="less">
.content {
    background: #fffaf4;
    padding: 0 5px 60px;
    .title {
        height: 24px;
        font-size: 20px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #10242c;
        line-height: 24px;
        margin-bottom: 11px;
    }

    .dec {
        font-size: 17px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #757575;
        line-height: 23px;
        margin-bottom: 31px;
    }

    .teach {
        font-size: 13px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #757575;
        line-height: 24px;
    }

    .tip {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        padding-top: 32px;
        margin-bottom: 32px;
        img {
            display: inline-block;
            width: 88px;
            height: 88px;
        }
        span {
            display: inline-block;
            margin-top: 14px;
            font-size: 17px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #ff8a23;
            line-height: 22px;
        }
    }
    .tip-msg {
        font-size: 17px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #757575;
        line-height: 24px;
        margin-bottom: 42px;
        text-align: center;
    }

    .item {
        margin-bottom: 24px;
        .label {
            height: 22px;
            font-size: 17px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 700;
            color: #10242c;
            line-height: 22px;
            margin-bottom: 8px;
        }
        .item-info {
            height: 56px;
            background: #ffffff;
            border-radius: 28px;
            opacity: 0.7;
            border: 3px solid rgba(255, 138, 35, 0.1);
            padding: 10px 40px 10px 24px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: center;
            .input {
                display: block;
                height: 36px;
                box-sizing: border-box;
                width: 100%;
                min-width: 0;
                margin: 0;
                padding: 0;
                line-height: inherit;
                text-align: left;
                background-color: transparent;
                border: 0;
                resize: none;
                user-select: auto;
                font-size: 16px;
                font-weight: 700;
            }
            .icon {
                width: 16px;
                height: 16px;
            }
        }
        .itemfocus {
            border: 3px solid rgba(255, 138, 35, 0.6);
        }
        .item-goods {
            border-radius: 27px;
            display: flex;
            align-items: center;
            padding: 15px 24px;
            background: rgba(16, 36, 44, 0.04);
            .showtext {
                display: inline-block;
                width: 100%;
                font-size: 17px;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                color: rgba(16, 36, 44, 0.4);
                line-height: 24px;
            }
            .icon {
                width: 32px;
                height: 32px;
            }
        }
    }
    .btn-light {
        width: 100%;
        box-sizing: border-box;
        height: 66px;
        background: #df3030;
        box-shadow: 0px 11px 15px 0px rgba(255, 138, 35, 0.2);
        border-radius: 33px;
        margin-top: 60px;
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        justify-content: center;

        span {
            font-size: 15px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 700;
            color: #ffffff;
            line-height: 20px;
        }
    }
    .btn-gray {
        height: 66px;
        background: #ffffff;
        box-shadow: 0px 20px 40px 0px rgba(223, 48, 48, 0.05);
        border-radius: 33px;
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        span {
            font-size: 15px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 700;
            color: #10242c;
            line-height: 20px;
        }
    }
}

</style>
